<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>Order_list</title>

    <!--=== Favicon ===-->
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<jsp:include page="../head.jsp"/>

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="index.html">主页</a></li>
                        <li><a href="shop.html">商品</a></li>
                        <li><a href="shop.html" class="active">我的订单</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper" style="min-height: 900px;">
    <div class="container">
        <!-- Wishlist Page Content Start -->
        <div class="row">
            <div class="col-lg-12">
                <!-- Wishlist Table Area -->
                <div class="cart-table table-responsive">
                    <c:forEach items="${page.list}" var="order">
                        <table class="table table-bordered" style="margin-bottom: 2%">
                            <thead style="margin-bottom: 20px;">
                            <tr>
                                <th colspan="7" class="pro-thumbnail" style="text-align: left;">订单号：${order.oid}</th>
                                <th style="text-align: center">
                                    <c:if test="${order.state == '0' || order.state== '4'}">
                                        <a title="删除订单" style="font-size: 16px;" href="javascript:;"
                                           onclick="deleteOrder(this,'${order.oid}')"><i
                                                class="fa fa-trash-o"></i></a>
                                    </c:if>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${order.orderitems}" var="item" varStatus="i">
                                <tr>
                                    <td class="pro-thumbnail" style="height: 110px;"><a href="#"><img
                                            class="img-fluid " style="min-width: 70px;min-height: 70px;"
                                            src="${pageContext.request.contextPath}/${item.product.imgs}"
                                            alt="缩略图"/></a></td>
                                    <td class="pro-title"><a href="#">${item.product.name}</a></td>
                                    <td class="pro-price"><span>￥${item.product.shelfPrice}</span></td>
                                    <td class="pro-quantity"><span class="text-success">${item.count}</span></td>
                                    <td class="pro-price"><span>￥${item.subtotal}</span></td>
                                    <!-- 申请售后 退款 -->
                                        <%-- 只显示一次 --%>
                                    <c:if test="${i.count == 1}">
                                        <td rowspan="${order.orderitems.size()}" class="pro-title">
                                            <c:if test="${order.state != '0' && order.state != '4'}">
                                                <a href="javascript:;" style="display: block" data-toggle="modal"
                                                   data-target="#myModal-${order.oid}">售后或退款</a>
                                                <a id="express_input" hidden href="#" data-toggle="modal"
                                                   data-target="#express">模态框出现</a>

                                            </c:if>
                                            <a title="当然并没有什么用" href="#">申请售后</a>
                                                <%-- model --%>
                                            <div class="modal fade" id="myModal-${order.oid}" tabindex="-1"
                                                 role="dialog"
                                                 aria-labelledby="myModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title" id="myModalLabel">退款请求</h4>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="body3" class="tab-content" name="divcontent">
                                                                <input id="WIDTRout_trade_no" name="WIDTRout_trade_no"
                                                                       value="${order.oid}" type="hidden"/><%--订单号--%>
                                                                    <%--<input id="WIDTRtrade_no" name="WIDTRtrade_no" value="" type="hidden"/>交易号--%>
                                                                <input id="WIDTRrefund_amount" name="WIDTRrefund_amount"
                                                                       value="${order.totalPrice}" type="hidden"><%--订单价格--%>
                                                                    <%----%>
                                                                <div class="form-group">
                                                                    <label for="refund_amount">您的退款金额</label>
                                                                    <span id="refund_amount"
                                                                          style="color: red;">${order.totalPrice}</span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <span>退款原因</span>
                                                                    <div style="display: inline-block;margin-left: 15px">
                                                                        <select id="refund_reason">
                                                                            <option value="1">正常退款</option>
                                                                            <option value="2">拍错了</option>
                                                                            <option value="3">长时间未发货</option>
                                                                            <option value="4">不想要了</option>
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default"
                                                                            data-dismiss="modal">
                                                                        Close
                                                                    </button>
                                                                    <button type="button" onclick="refund()"
                                                                            id="ordercancel"
                                                                            class="btn btn-primary ">
                                                                        退款
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td rowspan="${order.orderitems.size()}" class="pro-subtotal">
                                            <!--  0 未付款   1 已付款   2 已发货   3 交易成功  4  退款  -->
                                            <c:if test="${order.state == '0'}">
                                                <span class="text-success" style="">未付款</span><!-- 收货-->
                                            </c:if>
                                            <c:if test="${order.state == '1'}">
                                                <span class="text-success" style="">等待发货中</span><!-- 收货-->
                                            </c:if>
                                            <c:if test="${order.state == '3'}">
                                                <span class="text-success" style="">交易成功</span><!-- 收货-->
                                            </c:if>
                                            <c:if test="${order.state == '2'}">
                                                <span style="display: block">物流派件中</span>
                                                <a href="javascript:;" class="text-danger"
                                                   onclick="expCheck('${order.oid}')">物流查询</a>
                                            </c:if>
                                            <c:if test="${order.state == '4'}">
                                                <span style="">交易关闭</span> <!-- 退款-->
                                            </c:if>
                                        </td>
                                        <!-- 订单状态 -->
                                        <td rowspan="${order.orderitems.size()}" class="pro-remove">
                                            <c:if test="${order.state == '0'}">
                                                <input type="button"
                                                       onclick="CompleteOrder('${order.oid}','${order.totalPrice}')"
                                                       value="前去支付" class="btn btn-success btn-xs"></input>
                                                <p><a href="#">***</a></p>
                                            </c:if>
                                            <c:if test="${order.state != '3' && order.state != '0' && order.state != '4' }">
                                                <input type="button" class="btn btn-success btn-xs" value="确认收货" onclick="confirmOrder('${order.oid}')" >
                                                <p><a href="#">再次购买</a></p>
                                            </c:if>
                                            <c:if test="${order.state == '3'}">
                                                <button class="btn btn-default btn-xs">评价</button>
                                                <p><a href="#">再次购买</a></p>
                                            </c:if>

                                            <c:if test="${order.state == '4'}">
                                                <p><a href="#">再次购买</a></p>
                                            </c:if>
                                        </td>
                                    </c:if>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </c:forEach>
                </div>
            </div>
        </div>
        <!-- Wishlist Page Content End -->
        <%--分页未做--%>
        <%--分页结束--%>
    </div>
</div>
<!--== Page Content Wrapper End ==-->

<jsp:include page="../foot.jsp"/>
<div class="modal fade" id="express" tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="express_check">快递查询</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="tab-content" name="divcontent">
                    <div class="form-group">
                        <label for="refund_amount">您的快递单号为：</label>
                        <span id="expressId"></span>
                    </div>
                    <div class="form-group express">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->


<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>

<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>
<script>
    CompleteOrder = function (oid, total) {
        location.href = "${pageContext.request.contextPath}/order/CompleteOrder.do?oid=" + oid + "&total=" + total;
    }

    deleteOrder = function (data, oid) {

        $.ajax({
            url: Store.context + "/order/orderDelete.do",
            type: 'post',
            data: {
                oid: oid
            },
            success: function (d) {
                if (d.status == "0") {
                    $(data).parent().parent().parent().parent().remove();
                }
            }
        })
    }


    refund = function () {
        var refund_reason = $(".current")[1].innerHTML;
        var refund_amount = $("#WIDTRrefund_amount").val();
        var WIDTRout_trade_no = $("#WIDTRout_trade_no").val();

        var form1 = document.createElement("form");
        form1.action = Store.context + "/order/orderCancel.do";
        form1.method = "post";
        document.body.appendChild(form1);

        var input3 = document.createElement("input");
        input3.type = "text";
        input3.name = "cause";
        input3.value = refund_reason.toString();
        form1.appendChild(input3);
        var input1 = document.createElement("input");
        input1.type = "text";
        input1.name = "oid";
        input1.value = WIDTRout_trade_no;
        form1.appendChild(input1);
        var input2 = document.createElement("input");
        input2.type = "text";
        input2.name = "total";
        input2.value = refund_amount;
        form1.appendChild(input2);

        form1.submit();
        document.body.removeChild(form1);
    }

    confirmOrder = function (oid) {
        var form1 = document.createElement("form");
        form1.action = Store.context + "/order/confirm.do";
        form1.method = "post";
        form1.type = 'hidden';
        document.body.appendChild(form1);

        var input1 = document.createElement("input");
        input1.type = "text";
        input1.name = "oid";
        input1.value = oid;
        form1.appendChild(input1);

        form1.submit();
        document.body.removeChild(form1);
    }

    expCheck = function (oid) {
        $.ajax({
            url: "${pageContext.request.contextPath}/order/expcheck.do",
            type: "post",
            data: {
                oid: oid
            },
            success: function (data) {
                $("#expressId").html(data.logisticCode);
                $(".express").empty();
                var temp = data.traces;
                var length = temp.length;
                for (var i = 0; i < temp.length; i++) {
                    if (i == length) {
                        var result = "<div>" + temp[i].acceptStation + temp[i].acceptTime +
                            "&nbsp&nbsp&nbsp<i class='fa fa-truck' aria-hidden='true'></i>"
                            + "</div>";
                        $(".express").append(result);
                    } else {
                        var result = "<div>" + temp[i].acceptStation + temp[i].acceptTime +
                            "&nbsp&nbsp&nbsp<i class='fa fa-truck' aria-hidden='true'></i>"
                            + "</div>";
                        $(".express").append(result);
                    }
                }

                $("#express_input").click();
            }
        })
    }
</script>
</html>
